
import { ref } from 'vue';
<template>
  <div class="card bg-w border-r">
    <a-config-provider :locale="zhCN">
      <a-form @finish="submit" :model="form">
        <div class="section">
          <div class="section-title">红人中心</div>
          <div class="form flex flex-wrap">
            <a-form-item label="红人库" name="storeCode" :rules="[{ required: true, message: '请输入红人库' }]">
              <a-input placeholder="请输入" v-model:value="form.storeCode" maxlength="30" />
            </a-form-item>
            <a-form-item label="推广计划" name="virtualStore" :rules="[{ required: true, message: '请选择推广计划' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="红人频道基础数据分析" name="storeCode" :rules="[{ required: true, message: '请输入红人频道基础数据分析' }]">
              <a-input placeholder="请输入" v-model:value="form.storeCode" maxlength="30" />
            </a-form-item>
            <a-form-item label="红人频道深度数据分析" name="storeCode" :rules="[{ required: true, message: '请输入红人频道深度数据分析' }]">
              <a-input placeholder="请输入" v-model:value="form.storeCode" maxlength="30" />
            </a-form-item>
            <a-form-item label="红人频道价格预估" name="virtualStore" :rules="[{ required: true, message: '请选择红人频道价格预估' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="红人频道收藏夹数量" name="storeCode" :rules="[{ required: true, message: '请输入红人频道收藏夹数量' }]">
              <a-input placeholder="请输入" v-model:value="form.storeCode" maxlength="30" />
            </a-form-item>
            <a-form-item label="单个收藏夹容量" name="storeCode" :rules="[{ required: true, message: '请输入单个收藏夹容量' }]">
              <a-input placeholder="请输入" v-model:value="form.storeCode" maxlength="30" />
            </a-form-item>
          </div>
        </div>
        <div class="section">
          <div class="section-title">分销功能</div>
          <div class="form flex flex-wrap">
            <a-form-item label="Shopify网红分销" name="virtualStore" :rules="[{ required: true, message: '请选择Shopify网红分销' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </div>
        </div>
        <div class="section">
          <div class="section-title">红人搜索</div>
          <div class="form flex flex-wrap">
            <a-form-item label="按红人精准搜索" name="virtualStore" :rules="[{ required: true, message: '请选择按红人精准搜索' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="多维度综合搜索" name="virtualStore" :rules="[{ required: true, message: '请选择多维度综合搜索' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="竞品搜索" name="virtualStore" :rules="[{ required: true, message: '请选择竞品搜索' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="单次搜索结果数" name="storeCode" :rules="[{ required: true, message: '请输入单次搜索结果数' }]">
              <a-input placeholder="请输入" v-model:value="form.storeCode" maxlength="30" />
            </a-form-item>
          </div>
        </div>
        <div class="section">
          <div class="section-title">邮件中心</div>
          <div class="form flex flex-wrap">
            <a-form-item label="专业邮件营销系统" name="virtualStore" :rules="[{ required: true, message: '请选择专业邮件营销系统' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="群发功能" name="virtualStore" :rules="[{ required: true, message: '请选择群发功能' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="每日联系红人数量" name="storeCode" :rules="[{ required: true, message: '请输入每日联系红人数量' }]">
              <a-input placeholder="请输入" v-model:value="form.storeCode" maxlength="30" />
            </a-form-item>
            <a-form-item label="发送邮件数量" name="storeCode" :rules="[{ required: true, message: '请输入发送邮件数量' }]">
              <a-input placeholder="请输入" v-model:value="form.storeCode" maxlength="30" />
            </a-form-item>
            <a-form-item label="自定义邮件模板" name="virtualStore" :rules="[{ required: true, message: '请选择自定义邮件模板' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="自定义邮箱域名" name="virtualStore" :rules="[{ required: true, message: '请选择自定义邮箱域名' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </div>
        </div>
        <div class="section">
          <div class="section-title">任务中心</div>
          <div class="form flex flex-wrap">
            <a-form-item label="红人接单任务" name="storeCode" :rules="[{ required: true, message: '请输入红人接单任务' }]">
              <a-input placeholder="请输入" v-model:value="form.storeCode" maxlength="30" />
            </a-form-item>
            <a-form-item label="任务定向邀约" name="virtualStore" :rules="[{ required: true, message: '请选择任务定向邀约' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="任务智能推送" name="virtualStore" :rules="[{ required: true, message: '请选择任务智能推送' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="任务置顶推荐" name="virtualStore" :rules="[{ required: true, message: '请选择任务置顶推荐' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </div>
        </div>
        <div class="section">
          <div class="section-title">市场洞察</div>
          <div class="form flex flex-wrap">
            <a-form-item label="品牌洞察" name="storeCode" :rules="[{ required: true, message: '请输入品牌洞察' }]">
              <a-input placeholder="请输入" v-model:value="form.storeCode" maxlength="30" />
            </a-form-item>
            <a-form-item label="红人排行榜" name="virtualStore" :rules="[{ required: true, message: '请选择红人排行榜' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="创意素材中心" name="virtualStore" :rules="[{ required: true, message: '请选择创意素材中心' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="创意脚本中心" name="virtualStore" :rules="[{ required: true, message: '请选择创意脚本中心' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </div>
        </div>
        <div class="section">
          <div class="section-title">效果监控</div>
          <div class="form flex flex-wrap">
            <a-form-item label="合作进度跟踪" name="virtualStore" :rules="[{ required: true, message: '请选择合作进度跟踪' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="红人专属短链接" name="virtualStore" :rules="[{ required: true, message: '请选择红人专属短链接' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="数据监控" name="virtualStore" :rules="[{ required: true, message: '请选择数据监控' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </div>
        </div>
        <div class="section">
          <div class="section-title">其他权益</div>
          <div class="form flex flex-wrap">
            <a-form-item label="季度陪跑服务" name="virtualStore" :rules="[{ required: true, message: '请选择季度陪跑服务' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="红人营销专员孵化" name="virtualStore" :rules="[{ required: true, message: '请选择红人营销专员孵化' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="管理看板" name="virtualStore" :rules="[{ required: true, message: '请选择管理看板' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="子账号" name="storeCode" :rules="[{ required: true, message: '请输入子账号' }]">
              <a-input placeholder="请输入" v-model:value="form.storeCode" maxlength="30" />
            </a-form-item>
            <a-form-item label="产品实操培训" name="virtualStore" :rules="[{ required: true, message: '请选择产品实操培训' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in boolList" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="1对1客户服务" name="virtualStore" :rules="[{ required: true, message: '请选择1对1客户服务' }]">
              <a-select placeholder="请选择" allowClear v-model:value="form.virtualStore">
                <a-select-option v-for="item in customerServiceOptions" :key="item.key" :value="item.key">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </div>
        </div>
        <div class="btns clear">
          <a-button type="primary" size="middle" class="fr" :loading="btnLoading" html-type="submit">
            保存</a-button>
          <a-button type="primary" size="middle" class="fr" @click="back">返回</a-button>
        </div>
      </a-form>
    </a-config-provider>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: "memberDetail"
});
</script>
<script setup>
import zhCN from "ant-design-vue/es/locale/zh_CN";
import { ref } from 'vue';
import Bus from "@/utils/bus";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const boolList = [
  { key: 1, name: "是" },
  { key: 0, name: "否" },
];
const customerServiceOptions = [
  { key: '专业客户服务群', name: "专业客户服务群" },
  { key: 'VIP客户服务群', name: "VIP客户服务群" },
  { key: 'VIP高级客户服务群', name: "VIP高级客户服务群" }
];

const form = ref({});
const btnLoading = ref(false);

const submit = () => { }
// 返回上一页
const back = () => {
  Bus.emit("change-nav", route.name);
  router.push('memberAdmin');
}
</script>

<style lang="less" scoped>
.card {
  padding: 20px 24px 0;
  height: calc(100vh - 243px);
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 0;
  }

  .section {
    padding-bottom: 20px;

    .section-title {
      font-size: 16px;
      font-weight: bold;
      padding-left: 12px;
      color: #262626;
      line-height: 26px;
    }

    .form {
      .ant-form-item {
        width: 50%;
        margin-top: 20px;
        margin-bottom: 0;

        /deep/.ant-form-item-label {
          width: 165px;
          color: #262626;
        }

        /deep/.ant-input,
        /deep/.ant-select,
        /deep/.ant-cascader-picker,
        /deep/.ant-picker {
          width: 90%;

          input {
            width: 100%;
          }
        }

        /deep/.ant-form-item-control-input-content {
          &:hover {
            .a-input-clear {
              display: inline-block !important;
            }
          }

          .a-input-clear {
            position: absolute;
            top: 5px;
            right: 11%;
            z-index: 10;
            color: #999;
            font-size: 16px;
            display: none;
            cursor: pointer;
          }
        }

        /deep/.ant-input-affix-wrapper {
          width: 90%;

          .ant-input {
            width: 100%;
          }
        }
      }
    }
  }
}

.btns {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 16px 24px;
  background: #fff;
  border-top: 1px solid #f0f0f0;

  /deep/.ant-btn {
    margin-left: 8px;
  }
}
</style>